/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap');

@import 'navbar.css';
@import 'footer.css';
@import 'home-layout.css';
@import 'home-intro.css';
@import 'home-features.css';

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #00BCD4;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208);
  --ifm-code-font-size: 95%;
}

.docusaurus-highlight-code-line {
  background-color: rgb(216, 220, 232);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

code {
  background-color: rgba(255, 229, 100, 0.2);
  color: #1a1a1a;
  padding: 5px 8px;
}

[data-theme='dark'] code {
  background-color: rgba(115, 124, 153, 0.2);
  color: #e6e6e6;
}

[data-theme='dark'] .main-wrapper {
  background-color: #282c35;
}

.description {
  padding-top: 30px;
  font-size: 18px;
}

.hero .hero__title {
  font-size: 58px;
}

.hero .hero__subtitle {
  font-size: 30px;
}

.container img {
  width: 100px !important;
  margin-bottom: 27px !important;
  height: auto !important;
}

.container img.gif {
  width: 700px !important;
  margin-bottom: 27px !important;
  height: auto !important;
}

iframe {
  border: none;
  height: 30px;
  margin-left: 20px;
  width: 130px;
}